<template>
  <div class="app_home">
    <div class="home_left_tip text-gradient-to-r-white">奉建高速</div>
    <div class="home_title"><span class="text-gradient-to-r-white">奉建高速·小营特长隧道监测平台</span></div>
    <div class="home_subtit"><span>请选择你要登录的子系统</span></div>
    <div class="subsys_import">
      <div :to="{name:'Subsys_jd_gis'}" class="item" @click="open('/sys_jd')">
        <img src="../assets/images/home/01.png">
        <span>隧道监测平台</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  methods: {
    open(sys) {
      if (typeof sys === 'string') {
        try {
          const routes = this.$store.state.permission.topbarRouters
          const hasThisRouters = routes.find(e => e.path === sys)
          if (!hasThisRouters) {
            this.$notify({
              title: '提示',
              message: '你没有权限，请联系管理员',
              type: 'warning',
              position: 'top-left'
            })
            return
          }
          const name = this.getFirstLeafName(hasThisRouters)
          this.$router.push({ name: name })
        } catch (e) {
          console.log(e)
        }
      } else {
        this.$notify({
          title: '提示',
          message: '系统正在开发中...',
          type: 'warning'
        })
      }
    },
    // 查找到第一个叶子路由节点
    getFirstLeafName(route) {
      if (route.children) {
        return this.getFirstLeafName(route.children[0])
      } else {
        return route.name
      }
    }
  }
}
</script>

<style scoped lang="scss">
.home_left_tip {
  position: absolute;
  top: 23px;
  left: 34px;
  font-size: 21px;
  font-weight: bold;
  // background-image:-webkit-linear-gradient(left,rgba(255,255,255,0.6),#fff,rgba(255,255,255,0.6));
  // -webkit-background-clip:text;
  // -webkit-text-fill-color:transparent;
}
.app_home {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/home/BG.png");
  background-size: cover;
  // overflow: hidden;
  padding-top:.5px;
  .home_title {
    // display: inline-block;
    margin-top: 16vh;
    font-size: 62px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    span {
      //  background-image:-webkit-linear-gradient(left,rgba(255,255,255,0.6),#fff,rgba(255,255,255,0.6));
      // -webkit-background-clip:text;
      // -webkit-text-fill-color:transparent;
    }
    // letter-spacing:
  }
  .home_subtit {
    margin-top: 14vh;
    text-align: center;
    font-size: 20px;
    // font-weight: bold;
    color: #fff;
  }
  .subsys_import {
    display: flex;
    // justify-content: space-between;
    // justify-content: center;
    // width: 1100px;
    min-width: 970px;
    margin: 6vh 21vw;//auto;
    text-align: center;
    .item {
      cursor: pointer;
    }
    img {
      // display: block;
      width: 130px;
      height: 130px;
    }
    span {
      display: block;
      margin-top: 20px;
      font-size: 20px;
      color: #fff;
      font-weight: 500;
      // font-weight: bolder;
    }
  }
}
</style>
